<template>
  <a-card v-if="!data.length" :bordered="false">
    <a-empty />
  </a-card>
  <a-scrollbar v-else>
    <table class="w-full mt-[-16px] border-separate border-spacing-y-4">
      <tr v-for="record in data" class="bg-bg-3">
        <td v-if="showCheckbox" class="w-20 pl-8 first:rounded-tl-lg first:rounded-bl-lg">
          <!-- <Checkbox v-model:checked="record.isChecked" /> -->
        </td>
        <td
          :class="[
            'h-1',
            'first:rounded-tl-lg',
            'first:rounded-bl-lg',
            'last:rounded-tr-lg',
            'last:rounded-br-lg',
            'last:pr-4',
          ]"
          :style="{ width: col.width && `${col.width}px` }"
          v-for="col in columns"
        >
          <div class="flex flex-col items-center p-4 h-full">
            <div class="h-4 select-none text-tc-3">{{ col.title }}</div>
            <div :class="['flex flex-1 items-center', col.title ? 'pt-2' : undefined]">
              <span v-if="col.dataIndex" class="text-base">
                {{ get(record.rawRecord, col.dataIndex) }}
              </span>
              <component v-if="col.render" :is="col.render(record.rawRecord)" />
            </div>
          </div>
        </td>
      </tr>
    </table>
  </a-scrollbar>
</template>

<script setup lang="ts">
import { get } from "lodash-es";
import { TableColumn, TableRecord } from "./types";

defineProps<{
  data: TableRecord[];
  columns: TableColumn[];
  showCheckbox: boolean;
}>();
</script>

<style scoped></style>
